<template>
	<view>
		<u-image width="100%" height="476rpx" src="https://img.koalalf.com/kefu/kefuzhongxin%402x.png"></u-image>
		
		<view class="item" @click="copy">
			<u-image width="108rpx" height="108rpx" src="https://img.koalalf.com/kefu/weixin%402x.png"></u-image>
			<view class="item-line">
				<u-line class="u-line" direction="col" length="94"  color="#E6E3E6"></u-line>
			</view>
			<view class="item-text">
				<text class="item-text-title">官方微信</text>
				<text class="item-text-notice">点击复制微信号，去微信添加</text>
			</view>
		</view>
		
		<view class="item" @click="callTel">
			<u-image width="108rpx" height="108rpx" src="https://img.koalalf.com/kefu/dianhua%402x.png"></u-image>
			<view class="item-line">
				<u-line class="u-line" direction="col" length="94"  color="#E6E3E6"></u-line>
			</view>
			<view class="item-text">
				<text class="item-text-title">全国服务热线</text>
				<text class="item-text-notice">TEL: {{mobile}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {customer} from "@/common/http.api.js"
	export default {
		data() {
			return {
				wechat: '',
				mobile: ''
			}
		},
		
		onLoad() {
			uni.showLoading({
				title: '正在查询...',
			})
			let that = this;
			
			customer({}).then(res => {
				console.log(res)
				uni.hideLoading()
				this.wechat = res.wechat
				this.mobile = res.mobile
			})
		},
		methods: {
			callTel(){
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.mobile.toString(),
					success: function(){
						console.log(222222)
					},fail: (res) => {
						console.log(res)
					}
				});
			},
			copy(){
				let that = this
				uni.setClipboardData({
					data: this.wechat.toString(),
					success: function () {
						that.$u.toast('已复制');
					}
				});
			}
		}
	}
</script>

<style lang="less">
	page{
		height: 100vh;
		background-color: #fff;
	}
	.item{
		display: flex;
		flex-direction: row;
		margin: 0 32rpx 32rpx 32rpx;
		background-color: rgba(250, 250, 250, 1);
		padding: 24rpx 36rpx;
		justify-content: space-between;
		align-items: center;
	}
	.item-line{
		margin: 0 40rpx 0 20rpx;
	}
	.item-text{
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.item-text-title{
		color: #2E2E2E;
		font-size: 30rpx;
	}
	.item-text-notice{
		color: #8E8E93;
		font-size: 26rpx;
	}
</style>
